<template>
    <el-timeline class="horizontal-timeline">
        <el-timeline-item class="horizontal-timeline__lineitem" v-for="(activity, index) in activities" :key="index"
            :timestamp="activity.timestamp">
            <!-- 自定义小圆点 -->
            <template slot="dot">
                <div :class="['custom-node', { 'active-time-dot': activeTimeDotIndex === index }]"
                    @click="handleTimeDotClick(index)"></div>
            </template>
        </el-timeline-item>
    </el-timeline>
</template>

<script>
export default {
    name: "HorizontalTimeline",
    data() {
        return {
            activeTimeDotIndex: -1,
        }
    },
    props: {
        activities: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        handleTimeDotClick(index) {
            if (index == this.activeTimeDotIndex) {
                this.activeTimeDotIndex = -1
            } else {
                this.activeTimeDotIndex = index;
                console.log('time-dot-click', index);
                this.$emit('time-dot-click', index);
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.horizontal-timeline {
    display: flex;
    padding: 0;

    .horizontal-timeline__lineitem {
        transform: translateX(50%);
        width: 100px;
    }

    ::v-deep .el-timeline-item__tail {
        border-left: none;
        border-top: 2px solid var(--ui-text-color);
        width: 100%;
        position: absolute;
        top: 9px;
    }

    ::v-deep .el-timeline-item__node {
        background-color: var(--ui-text-color);
    }

    ::v-deep .el-timeline-item__wrapper {
        padding-left: 18px;
        position: absolute;
        top: 20px;
        transform: translateX(-50%);
        text-align: center;
    }

    .custom-node {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: #ffffff;
    }

    .active-time-dot {
        background-color: yellow;
    }
}
</style>